<!-- templates/video_result.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频生成完成 - 花艺AI测试应用</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body { padding-top: 2rem; }
        .header { margin-bottom: 2rem; }
        .result-container { max-width: 900px; margin: 0 auto; }
        .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; margin-bottom: 20px; }
        .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        .stats-badge { background-color: #f8f9fa; border-radius: 20px; padding: 5px 15px; margin-right: 10px; font-size: 0.9rem; }
        .stats-badge i { margin-right: 5px; }
        .share-btn { margin-right: 10px; }
        .meta-info { font-size: 0.9rem; color: #6c757d; }
        .character-card { border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
        .character-card img { width: 100%; height: 250px; object-fit: cover; }
        .script-container { max-height: 350px; overflow-y: auto; }
        .timestamp { font-weight: bold; color: #6f42c1; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header text-center">
            <h1>花艺AI测试应用</h1>
            <p class="lead">视频生成完成</p>
            <nav class="nav justify-content-center">
                <a class="nav-link" href="/">首页</a>
                <a class="nav-link" href="/upload">上传知识</a>
                <a class="nav-link" href="/image">生成图像</a>
                <a class="nav-link" href="/speech">语音交互</a>
                <a class="nav-link" href="/video/list">视频库</a>
                <a class="nav-link" href="/status">系统状态</a>
            </nav>
        </div>

        <div class="result-container">
            <div class="alert alert-success mb-4">
                <i class="bi bi-check-circle-fill"></i> 您的花艺教学视频已生成完成！
            </div>

            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-camera-video-fill"></i> {{ task.request.topic }}</h5>
                </div>
                <div class="card-body">
                    <div class="video-container">
                        <video controls poster="{{ task.result.thumbnail_url }}" preload="none">
                            <source src="{{ task.result.video_url }}" type="video/mp4">
                            您的浏览器不支持HTML5视频
                        </video>
                    </div>

                    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                        <div>
                            <span class="stats-badge">
                                <i class="bi bi-clock"></i> {{ task.result.duration | round(1) }}秒
                            </span>
                            <span class="stats-badge">
                                <i class="bi bi-calendar3"></i> {{ task.completed_at.split(' ')[0] }}
                            </span>
                            <span class="stats-badge">
                                <i class="bi bi-translate"></i> {{ task.request.language }}
                            </span>
                        </div>
                        <div>
                            <button class="btn btn-sm btn-outline-primary share-btn" onclick="shareVideo()">
                                <i class="bi bi-share-fill"></i> 分享
                            </button>
                            <a href="{{ task.result.video_url }}" class="btn btn-sm btn-outline-success" download>
                                <i class="bi bi-download"></i> 下载
                            </a>
                        </div>
                    </div>

                    <p class="meta-info">
                        <strong>视频ID:</strong> {{ task.result.video_id }} |
                        <strong>生成时间:</strong> {{ task.completed_at }}
                    </p>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card character-card h-100">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="bi bi-person-square"></i> 虚拟花艺师</h5>
                        </div>
                        <img src="{{ task.result.character_image_url if task.result.character_image_url else '/static/images/' + task.result.character_id + '.png' }}"
                             alt="虚拟花艺师" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title">{{ task.request.character_style | capitalize }}风格角色</h5>
                            <p class="card-text">AI生成的专业花艺师形象，为您演示插花技巧。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0"><i class="bi bi-file-text"></i> 教学脚本</h5>
                        </div>
                        <div class="card-body script-container">
                            <div id="script-content">
                                <!-- 脚本内容将动态加载 -->
                                <div class="text-center">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p>加载脚本内容...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header bg-purple text-white" style="background-color: #6f42c1;">
                    <h5 class="mb-0"><i class="bi bi-graph-up"></i> 视频分析</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="bi bi-tags"></i> 特点</h6>
                            <ul>
                                <li>由DeepSeek-R1生成的专业花艺教程内容</li>
                                <li>{{ task.request.character_style | capitalize }}风格的虚拟花艺师形象</li>
                                <li>VITS语音合成技术打造的自然语音</li>
                                <li>先进的口型同步技术</li>
                                <li>高清{{ task.request.resolution }}分辨率视频</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="bi bi-bar-chart-line"></i> 技术参数</h6>
                            <ul>
                                <li><strong>主题:</strong> {{ task.request.topic }}</li>
                                <li><strong>角色风格:</strong> {{ task.request.character_style }}</li>
                                <li><strong>教学风格:</strong> {{ task.request.style }}</li>
                                <li><strong>语言:</strong> {{ task.request.language }}</li>
                                <li><strong>处理时间:</strong> {{ (task.completed_at | default('') | string).split(' ')[1] if task.completed_at else '' }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between">
                <a href="/video/create" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> 创建新视频
                </a>
                <a href="/video/list" class="btn btn-outline-primary">
                    <i class="bi bi-collection-play"></i> 查看所有视频
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 加载脚本内容
            const scriptId = '{{ task.result.script_id }}';

            fetch(`/static/temp/${scriptId}.json`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('脚本文件不存在');
                    }
                    return response.json();
                })
                .then(data => {
                    // 清除加载中状态
                    document.getElementById('script-content').innerHTML = '';

                    // 添加脚本段落
                    if (data.segments && data.segments.length > 0) {
                        data.segments.forEach(segment => {
                            const paragraphElement = document.createElement('p');
                            paragraphElement.innerHTML = `<span class="timestamp">[${segment.timestamp}]</span> ${segment.content}`;
                            document.getElementById('script-content').appendChild(paragraphElement);
                        });
                    } else if (data.full_text) {
                        // 如果没有段落但有完整文本，则显示完整文本
                        const textElement = document.createElement('p');
                        textElement.textContent = data.full_text;
                        document.getElementById('script-content').appendChild(textElement);
                    } else {
                        // 如果没有内容，显示提示
                        const noContentElement = document.createElement('p');
                        noContentElement.textContent = '脚本内容不可用';
                        document.getElementById('script-content').appendChild(noContentElement);
                    }
                })
                .catch(error => {
                    console.error('加载脚本内容失败:', error);
                    document.getElementById('script-content').innerHTML = '<p class="text-danger">加载脚本内容失败</p>';
                });
        });

        // 分享功能
        function shareVideo() {
            if (navigator.share) {
                navigator.share({
                    title: '{{ task.request.topic }}',
                    text: '看看我用花艺AI生成的教学视频!',
                    url: window.location.href
                })
                .then(() => console.log('分享成功'))
                .catch((error) => console.log('分享失败', error));
            } else {
                // 复制URL到剪贴板
                const url = window.location.href;
                navigator.clipboard.writeText(url)
                    .then(() => alert('视频链接已复制到剪贴板'))
                    .catch(err => console.error('复制失败:', err));
            }
        }
    </script>
</body>
</html>